<template>

  <el-container>
    <el-header id="manageHeader" height="420px">
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchBase" class="demo-form-inline" style="margin-top: 1.5%;">
        <el-form-item label="教师号">
          <el-input v-model="searchBase.teacherid" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="毕业年份">
          <el-input v-model="searchBase.endTime" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="研究方向">
          <el-input v-model="searchBase.researchdir" placeholder="请输入" style="width: 130px;">
          </el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="value" style="width:90px" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究生导师">
          <el-select v-model="value2" style="width:90px" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
       
      </el-form>

      <!--部门表格-->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="teacherid" label="教师号" align="center">
          </el-table-column>
          <el-table-column prop="teacherName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="title" label="职称" align="center">
          </el-table-column>
          <el-table-column prop="tutor" label="研究生导师" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="毕业时间" align="center">
          </el-table-column>
          <el-table-column prop="graduationSchool" label="毕业院校" align="center">
          </el-table-column>
          <el-table-column prop="speciality" label="专业" align="center">
          </el-table-column>
          <el-table-column prop="education" label="学位" align="center">
          </el-table-column>
          <el-table-column prop="researchdir" label="研究方向" align="center">
          </el-table-column>


        </el-table>
      </template>

      <!--分页工具条-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>

    </el-header>
    <el-main>
      <div class="echart" id="mychart" :style="{ float: 'left', width: '50%', height: '250px' }">
      </div>

      <div class="echart" id="mychart2" :style="{ float: 'left', width: '45%', height: '200px' }">
      </div>




    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default {
name:'Colinfo',
data(){
    return{
      // 接受学院的信息
      academyName: '',
      // 搜索的表单
      searchBase: {
        teacherid: "",
        endTime: "",
        researchdir:"",
        title:'',
        tutor:''
      },
      // 教师职称下拉框
      options: [{
        value: '讲师',
        label: '讲师'
      }, {
        value: '副教授',
        label: '副教授'
      }, {
        value: '教授',
        label: '教授'
      }],
      value: '',
      // 研究生导师
      options2: [{
        value: '是',
        label: '是'
      }, {
        value: '否',
        label: '否'
        }, {
          value: '',
          label: '全部'
        }
      ],
      value2: '',
        // 统计表格数据
       tableData:[],
    
    // 分页
      totalCount: 0,
   
      // 当前页码
      currentPage: 1,
      pageSize: 5,
    }
 
},
  mounted() {
    this.academyName=this.$route.query.mark
    this.selectAll();
    this.initEcharts1();
    this.initEcharts2();
    
  },
  methods:{
    onsubmit(){
      this.searchBase.title = this.value
      this.searchBase.tutor=this.value2
      this.selectAll()
   
    },
    selectAll(){
     
      axios({
        method: "post",
        url: " http://localhost:8888/Teachersystem/Infomation/infoselect?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&academyName=" + this.academyName,
        data: this.searchBase
      }).then(resp => {
        this.tableData = resp.data.rows;
        this.totalCount = resp.data.totalCount;
      })
    },
  initEcharts1() {
    const myChart = echarts.init(document.getElementById("mychart"));
    axios({
      method: "get",
      url: "http://localhost:8888/Teachersystem/Infomation/getBar?academyName="+this.academyName
    }).then((resp) => {// 图标初始化
    myChart.setOption({
      title: {
        text: "科研项目统计"
      },
      xAxis: {
        data: ["专利数", "著作数", "科研项目数", "论文数" ]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar", //类型为柱状图
          data:resp.data
        }
      ]
    });
    })
    },
    initEcharts2(){
      const myChart = echarts.init(document.getElementById("mychart2"));
      // 图标初始化
      axios({
        method:"get",
        url: "http://localhost:8888/Teachersystem/Infomation/getPie?academyName=" + this.academyName
      }).then((resp)=>{
        myChart.setOption({
          legend: {
            // 图例
            data: resp.data,
            right: "10%",
            top: "20%",
            orient: "vertical"
          },
          title: {
            // 设置饼图标题，位置设为顶部居中
            text: "教师数据",
            top: "0%",
            left: "center"
          },
          series: [
            {
              type: "pie",
              label: {
                show: true,
                formatter: " {c} 个"
              },
              top: "10%",
              radius: "60%", //饼图半径
              data: resp.data
            }
          ]

        });
      })
     
     
    },
 
 // 分页操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.selectAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.selectAll();
    }
  },
}


</script>

<style>

</style>